<template>
    <div class="result">
        <div class="r-body">

            <table class="table">
                <tr>
                    <td>姓名</td>
                    <td>{{detail.studentName}}</td>
                </tr>
                <tr>
                    <td>电话</td>
                    <td>{{detail.phone}}</td>
                </tr>
                <tr>
                    <td>校区</td>
                    <td>{{detail.schoolName}}</td>
                </tr>
                <tr>
                    <td>科目</td>
                    <td>{{detail.subjectName}}</td>
                </tr>
                <tr>
                    <td>年级</td>
                    <td>{{detail.sectionName}}</td>
                </tr>
                <tr>
                    <td>总分</td>
                    <td>{{detail.getScore}}</td>
                </tr>
                <tr>
                    <td>平均分</td>
                    <td>{{detail.modelAvgScore}}</td>
                </tr>
                <tr>
                    <td>录取情况</td>
                    <td class="record">
                        {{detail.passStr}}
                    </td>
                </tr>
                <tr>
                    <td>备注</td>
                    <td class="remark">{{detail.remark}}</td>
                </tr>
            </table>
            <div class="check-report" @click="toDetail">
                查看详细报告分析
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-chakan"></use>
                </svg>
            </div>
        </div>
        <img class="logo" src="../../assets/img/report/logo.png" alt="">
    </div>
</template>
<script>
import io from '../../lib/io'
export default {
    name: 'h-index',
    data() {
        return {
            detail: {}
        }
    },
    created() {
        document.title = '成绩查分系统'
        this.getDetail()
    },
    methods: {
        getDetail() {
            io.post(io.reportPass, { reportId: this.$route.query.reportId,
                sysCode:'0003' }, (res) => {
                if (res.success) {
                    this.detail = res.data
                }
            })
        },
        toDetail(){
            this.$router.push({path:'report-swiper',query:{reportId:this.detail.reportId,studentName:this.detail.studentName,areamTeamId:'599411894062678016'}})
        }
    }
}
</script>

<style lang="stylus" scoped>
.result
    min-height 100%
    background url('../../assets/img/report/list-bg.png')
    background-size 100%
    background-repeat no-repeat
    position relative
    padding-top .76rem
    background-color #F8FBFC
    box-sizing border-box
.r-body
    padding .44rem
    margin auto
    width 6.7rem
    box-sizing border-box
    background #ffffff
    border-radius .15rem
.table 
    width 100%
    tr 
        width 100%
        color #333333
        display flex
        align-items center
        border-radius .05rem
        &.red 
            color #fb6e58
        td 
            text-align center
            flex 1
            font-size 0.24rem
            line-height 0.34rem
            padding 0.15rem
            box-sizing border-box
            &:first-child
                width 1.5rem
                flex none
            &:nth-child(2)
                text-align left 
                flex 1
    tr:nth-child(2n-1) 
        background-color #f0f7ff
.check-report
    background linear-gradient(90deg,#2894DB,#1DACE2)
    border-radius .15rem
    width 3.06rem
    height .64rem
    color #ffffff
    font-size .24rem
    display flex
    align-items center
    justify-content center
    margin .36rem auto 0
    .icon
        margin-left .1rem
.record,.remark
    font-size .18rem
    .icon
        font-size .45rem
        &.tongguo
            color #FF0000
.logo
    position relative 
    top 1rem
    margin auto
    display block
</style>

